<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head th:include="include :: header"> <style>
        /*ul,li{list-style:none;}*/
        /*:focus{outline: none;}*/
        /*input[type=text]{border:1px solid #ccc;}*/
        /*input[type=text]:hover,input[type=text]:focus{border-color: #57bc80; box-shadow: none;}*/

        /*body{padding:50px; font-size: 12px;}*/
        .my-select-box {
            position: relative;
        }

        .my-select-box .my-select-input {
            height: 24px;
            line-height: 24px;
            padding: 0 5px;
            background: url() right center no-repeat;
            padding-right: 20px !important;
            width: 100%;
            box-sizing: border-box;
        }

        .my-select-box .my-select-list {
            position: absolute;
            left: 0;
            z-index: 101;
            border: 1px solid #ccc;
            border-top: none;
            max-height: 120px;
            overflow-y: auto;
            display: none;
            background: #fff;
            width: 100%;
            box-sizing: border-box;
        }

        .my-select-box .my-select-list li {
            height: 22px;
            line-height: 22px;
            padding: 0 3px;
            cursor: pointer;
            margin-bottom: 1px
        }

        .my-select-box .my-select-list li.choosed {
            background: #ccc;
            color: #fff;
        }

        .my-select-box .my-select-list li:hover {
            background: #ccc;
            color: #fff;
        }
    </style></head>
    <body class="hold-transition skin-blue sidebar-mini">
        <section class="content-header">
            <h1>重点项目</h1>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <form id="queryForm">
                                <div class="row" style="padding-bottom: 10px;border-bottom: #d2d6de 2px solid">
                                    <div class="form-inline">
                                        <div class="form-group col-sm-3" style="width:225px;padding: 0px;margin: 0px">
                                            <label style="width: 60px;text-align: right">名称</label>
                                            <input type="text" style="width:160px;border-radius: 5px" maxlength="255"
                                                   name="name" class="form-control" placeholder="请输入项目名称或订单号或代码">
                                        </div>
                                        <div class="form-group col-sm-3" style="width:205px;padding: 0px;margin: 0px">

                                            <!--<input  type="text" name="client"-->
                                            <!--style="width:150px;border-radius: 5px" maxlength="255" class="form-control"-->
                                            <!--placeholder="请输入客户名">-->
                                            <div class="my-select-box">
                                                <label style="width: 45px;text-align: right;">客户名</label>
                                                <input type="text" style="width: 150px;border-radius: 5px" name="client"
                                                       class="my-select-input form-control" placeholder="请输入客户名"
                                                       maxlength="255"/>
                                                <ul id="clientList" class="my-select-list"
                                                    style="margin-left:50px;position: absolute;left:0; z-index: 101; border:1px solid #ccc; border-radius: 5px; border-top:none; max-height: 300px; overflow-y: auto; display: none; background: #fff; width:148px; box-sizing: border-box;">
                                                    <li style="list-style: none;height: 22px; line-height: 22px; padding:0 3px; cursor:pointer; margin-bottom: 1px"
                                                        data-value="1">第一项
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-2" style="width: 200px;padding: 0px;margin: 0px">
                                            <label style="width:60px;text-align: right;">订单类型</label>
                                            <select name="orderType" class="form-control"
                                                    style="width: 130px;border-radius: 5px">
                                                <option value="0" selected="selected">全部</option>
                                                <option value="1">体系楼</option>
                                                <option value="2">备库</option>
                                                <option value="3">财务</option>
                                                <!--<option value="0">取消</option>-->
                                            </select>
                                        </div>
                                        <div class="form-group col-sm-2" style="width:200px;padding: 0px;margin: 0px">
                                            <label style="width:60px;text-align: right;">订单状态</label>
                                            <select name="orderStatus" class="form-control"
                                                    style="width: 130px;border-radius: 5px">
                                                <option value="-1" >全部</option>
                                                <option value="3">已完成</option>
                                                <option value="2" selected="selected">未完成</option>

                                                <!--<option value="0">取消</option>-->
                                            </select>
                                        </div>
                                        <div class="form-group col-sm-3" style="width: 290px;padding: 0px;margin: 0px">
                                            <label style="width: 60px;text-align: right">下单时间</label>
                                            <input type="text" class="form-control datepicker" style="width: 102px;"
                                                   name="startTime" readonly="readonly"/>
                                            <span> 至 </span>
                                            <input type="text" class="form-control datepicker" style="width: 102px"
                                                   name="endTime" readonly="readonly"/>
                                        </div>
                                        <div class="form-group col-sm-1" style="width:160px;padding: 0px;margin: 0px">
                                            <label style="width: 40px;text-align: right">年度</label>
                                            <select id="year" name="year" class="form-control"
                                                    style="width: 110px;border-radius: 5px">
                                                <option value="" selected="selected">请选择</option>
                                            </select>
                                        </div>

                                    </div>
                                </div>

                                <div class="row" style="margin-top: 10px;padding-bottom: 5px">
                                    <div class="form-inline">
                                        <!--<div class="form-group" style="margin-right: 10px;">-->
                                        <!--<label>数量</label>-->
                                        <!--<input type="text" name="num" class="form-control" placeholder="请输入数量">-->
                                        <!--</div>-->
                                        <div class="form-group col-sm-3" style="width: 225px;padding: 0px;margin: 0px">
                                            <label style="width: 60px;text-align: right;">下达厂区</label>
                                            <select name="factories" class="form-control"
                                                    style="border-radius: 5px;width: 160px;text-align: center">
                                                <option value="" selected="selected">请选择</option>
                                                <option th:each="factory:${factories}" th:value="${factory.name}"
                                                        th:text="${factory.pageName}"></option>
                                            </select>
                                        </div>
                                        <div class="form-group col-sm-1" style="width: 205px;padding: 0px;margin: 0px">
                                            <label style="width: 60px;text-align: right;">生产状况</label>
                                            <select name="factoriesStatus" class="form-control" style="width: 135px;border-radius: 5px">
                                                <option value="0" selected="selected">全部</option>
                                                <option value="3">执行中</option>
                                                <option value="4">未开始</option>
                                                <option value="1">未完成</option>
                                                <option value="2">已完成</option>
                                                <!--<option value="0">取消</option>-->
                                            </select>
                                        </div>
                                        <div class="form-group col-sm-2" style="width: 200px;padding: 0px;margin: 0px">
                                            <label style="width: 60px;text-align: right;">其他节点</label>
                                            <select name="taskType" class="form-control"
                                                    style="width: 130px;border-radius: 5px">
                                                <option value="1" selected="selected">全部</option>
                                                <option value="2">工艺-铝模板</option>
                                                <option value="3">工艺-铝背楞</option>
                                                <option value="4">生产-铝模板</option>
                                                <option value="5">生产-铝背楞</option>
                                                <option value="6">平库</option>
                                                <option value="7">喷涂</option>
                                                <option value="8">包装</option>
                                                <option value="9">仓储</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-sm-1" style="width: 260px;padding: 0px;margin: 0px">
                                            <label style="width: 60px;text-align: right;">节点状况</label>
                                            <select name="status" class="form-control" style="width: 130px;border-radius: 5px">
                                                <option value="0" selected="selected">全部</option>
                                                <option value="3">执行中</option>
                                                <option value="4">未开始</option>
                                                <option value="1">未完成</option>
                                                <option value="2">已完成</option>
                                                <!--<option value="0">取消</option>-->
                                            </select>
                                        </div>
                                        <div class="form-group col-sm-1"
                                             style="text-align: right;padding: 0px;margin: 0px;float: right">
                                            <button type="button" class="btn btn-success" id="btn-search">
                                                <!--<i class="fa fa-search"></i>-->
                                                <span class="Bold">搜索</span>
                                            </button>
                                        </div>
                                        <!--<div class="form-group" style="margin-right: 10px;">-->
                                        <!--<label>发货时间排序</label>-->
                                        <!--<select name="non" class="form-control">-->
                                        <!--<option value="0" selected="selected">请选择</option>-->
                                        <!--<option value="1">升序</option>-->
                                        <!--<option value="2">降序</option>-->
                                        <!--&lt;!&ndash;<option value="0">取消</option>&ndash;&gt;-->
                                        <!--</select>-->
                                        <!--</div>-->


                                    </div>
                                </div>
                                <!--<div class="row" style="margin-top: 10px">-->
                                <!--<div class="form-inline">-->
                                <!---->

                                <!--</div>-->
                                <!--</div>-->
                            </form>
                        </div>
                        <div class="box-body">
                            <table id="bootstrap-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div th:include="include :: footer"></div>
        <script th:inline="javascript">
            var names = ["不需要","未开始","执行中","已完成"];
            var colors = ["label-danger","label-default","label-warning","label-success"];
            var table;
            ;(function ($) {
                /**
                 *@Description: 获取客户名下拉框内容
                 *@Author: 徐一贺
                 *@CreateDate: 2020/3/21 10:18
                 *@Phone: 18210416791
                 *@Param:
                 *@Return: json
                 *@Version: 1.0.0
                 */
                $.post(ctx + 'config/client/allList',
                    {},
                    function (res) {
                        if(res.type=='SUCCESS'){
                            $('#clientList').empty();
                            for (var i = 0; i < res.data.rows.length; i++) {
                                $('#clientList').append('<li style="list-style: none;height: 22px; line-height: 22px; padding:0 3px; cursor:pointer; margin-bottom: 1px" data-value="1">'+res.data.rows[i].name+'</li>');
                            }
                        }
                    }, 'json');


                $.fn.MySelect = function () {
                    this.each(function () {
                        var $box = $(this);
                        var $input = $box.find("input.my-select-input");  //输入框
                        var $list = $input.next();                          //ul装扮成下拉框
                        var inputHeight = $input.outerHeight();   //计算input输入框的高度和宽度，方便定位ul和设置ul及包裹元素的宽度
                        //var inputWidth=$input.innerWidth();
                        $list.css({"top": (inputHeight)});
                        //$box.width($input.outerWidth());

                        $input.focus(function () {   //输入框获得焦点后，显示下拉选择ul
                            var $nextUl = $(this).next();
                            if ($nextUl.children().length > 0) {
                                $(this).next().show();
                            }
                        }).bind('input propertychange', function () {  //绑定监测输入框的输入值更改
                            var $this = $(this);
                            $this.attr("data-id", "");
                            var curText = $this.val();
                            var $nextUl = $(this).next();
                            if ($nextUl.children().length > 0) {
                                $nextUl.find("li").removeClass("choosed");
                                $nextUl.find("li").each(function (i, item) {
                                    var txt = $(item).text();
                                    if (txt === curText) {
                                        var v = $(item).attr("data-value");
                                        $this.attr("data-id", v);
                                        $(item).addClass("choosed");
                                    }
                                });
                            }
                        });
                        //修改成如下事件绑定，为了给动态添加的li也可以产生点击效果
                        $list.off('click', 'li').on('click', 'li', function (e) {
                            var $this = $(this);
                            var value = $this.attr("data-value") || '';
                            $input.val($this.text()).attr("data-id", value);
                            $this.addClass("choosed").siblings().removeClass("choosed");
                            $this.parent().hide();
                        });
                    });

                    $(document).click(function (e) {  //点击.my-select-box范围外时隐藏ul下拉框
                        var target = e.target;
                        var $target = $(target);
                        var $parent = $target.closest('.my-select-box');
                        if ($parent.length < 1) {  //说明不是.my-select-box范围内点击，将ul隐藏
                            $(".my-select-list").hide();
                        } else if ($parent.length == 1) {  //如果存在多个my-select-box的情况，将其余的非这项以外的都隐藏
                            var $ul = $parent.find(".my-select-list");
                            var flag = $ul.is(":hidden");
                            $(".my-select-list").hide();
                            if (!flag) $ul.show();
                        }
                    });
                    return this;
                }
            })(jQuery);

            $(".my-select-box").MySelect();
            function yearSelectCreate() {
                var date= new Date();
                var endYear = date.getFullYear();
                for (var i = endYear; i >= 2016; i--) {
                    if (i == endYear) {
                        $("#year").append("<option value='" + i + "' selected='selected'>" + i + "年" + "</option>");
                    } else if (i === 2016)
                        $("#year").append("<option value='" + i + "'>" + i + "年及以前" + "</option>");
                    else
                        $("#year").append("<option value='" + i + "'>" + i + "年" + "</option>");
                }
            }

            $(function () {

                yearSelectCreate();

                /**
                 * 加载列表
                 */
                table = js.table.init({
                    url: ctx + "overview/focus/list",
                    showColumns: true,
                    showExport: true,
                    sortable: true,                                    // 是否启用排序
                    sortStable: true,                                  // 设置为 true 将获得稳定的排序
                    columns: [
                        {
                            title: '序号', field: 'id', width: '40',
                            formatter: function (value, row, index, field) {
                                return index + 1;
                            }
                        },
                        {title: '项目名称', field: 'name', width: '150'},
                        // {title: '客户', field: 'client', width: '100'},
                        {title: '订单号', field: 'orderNum', width: '60'},
                        {title: '代码', field: 'code', width: '80'},
                        {title: '数量', field: 'num'},
                        // {title: '非标件', field: 'non'},
                        {title: '面积', field: 'area'},
                        // {title: '喷涂要求', field: 'spray', width: '80'},
                        /*{title: '是否拼装', field: 'assemble', width: '80',
                            formatter: function (value, row, index) {
                                if (value === 1) {
                                    return '拼装';
                                }else if (value === 0) {
                                    return '免拼装';
                                }
                            }
                        },
                        {title: '是否有铁件', field: 'iron', width: '80',
                            formatter: function (value, row, index) {
                                if (value === 1) {
                                    return '是';
                                }else if (value === 0) {
                                    return '否';
                                }
                            }
                        },
                        {title: '是否半铝支撑', field: 'halfSupport', width: '80',
                            formatter: function (value, row, index) {
                                if (value === 1) {
                                    return '是';
                                }else if (value === 0) {
                                    return '否';
                                }
                            }
                        },*/
                        {title: '生产厂', field: 'factories', width: '120',
                            formatter: function (value, row, index) {
                                if (value != null) {
                                    return value.split(',').join('<br>');
                                }
                            }
                        },
                        {title: '客户', field: 'client', width: '80'},
                        // {title: '设计文件<br>下发日期', field: 'designTime', width: '100'},
                        {title: '客户要求<br>发货日期', field: 'shipTime', width: '100',
                            sortable: true,
                            formatter: function (value, row, index) {
                                if (row.topic === 1) {
                                    return `<span class="text-red">${value}</span>`;
                                }
                                return value;
                            }
                        },
                        // {title: '计划<br>完成日期', field: 'shipTime', width: '100'},
                        // {title: '计划<br>发货日期', field: 'shipTime', width: '100'},
                        {title: '备注', field: 'remark', width: '150'},
                        {title: '工艺', field: 'processStatus', width: '60',
                            formatter: function (value, row, index) {
                                var html = [];
                                if (row.processFirstStatus != null) {
                                    html.push('<span class="badge ' + colors[row.processFirstStatus] + '">铝模板</span> ')
                                }
                                if (row.processSecondStatus != null) {
                                    html.push('<span class="badge ' + colors[row.processSecondStatus] + '">铝背楞</span>')
                                }
                                return html.join('');
                            }
                        },
                        {title: '焊接', field: 'produceStatus', width: '60',
                            formatter: function (value, row, index) {
                                var html = [];
                                if (row.produceTempStatus != null) {
                                    html.push('<span class="badge ' + colors[row.produceTempStatus] + '">铝模板</span> ')
                                }
                                if (row.produceBackStatus != null) {
                                    html.push('<span class="badge ' + colors[row.produceBackStatus] + '">铝背楞</span>')
                                }
                                return html.join('');
                            }
                        },
                        {title: '平库', field: 'consumeStatus', width: '60',
                            formatter: function (value, row, index) {
                                return '<span class="badge ' + colors[value] + '">' + names[value] + '</span> '
                            }
                        },
                        {title: '喷涂', field: 'sprayStatus', width: '60',
                            formatter: function (value, row, index) {
                                return '<span class="badge ' + colors[value] + '">' + names[value] + '</span> '
                            }
                        },
                        {
                            title: '包装', field: 'packStatus', width: '120',
                            formatter: function (value, row, index) {
                                var actions = [];
                                if (value) {
                                    actions.push('<span class="badge ' + colors[value] + '">' + names[value] + '</span><br>');
                                }
                                if (row.mainStatus) {
                                    actions.push(' <span class="badge ' + colors[row.mainStatus] + '">主体</span> ');
                                }
                                if (row.ironStatus) {
                                    actions.push(' <span class="badge ' + colors[row.ironStatus] + '">铁件</span> ');
                                }
                                if (row.backStatus) {
                                    actions.push(' <span class="badge ' + colors[row.backStatus] + '">背楞</span> ');
                                }
                                if (row.supportStatus) {
                                    actions.push(' <span class="badge ' + colors[row.supportStatus] + '">支撑</span> ');
                                }
                                return actions.join('');
                            }
                        },
                        {title: '仓储', field: 'storeStatus', width: '60',
                            formatter: function (value, row, index) {
                                return '<span class="badge ' + colors[value] + '">' + names[value] + '</span> '
                            }
                        },
                        {
                            title: '操作', width: '40',
                            formatter: function (value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-xs ' + (row.topic === 1 ? 'btn-danger' : 'btn-info') + '" target="_blank" href="'+ ctx + 'board/single/' + row.id + '"> 查看</a> ');
                                return actions.join('');
                            }
                        }
                    ]
                });

                /**
                 * 表格搜索
                 */
                $("#btn-search").click(function () {
                    js.table.search(table);
                });
                /** 联动 */
                $("select[name='factories']").change(function () {
                    let taskType = $("select[name='taskType']");
                    switch (this.selectedIndex) {
                        case 0:
                            taskType.val(1);
                            break;
                        case 1:
                        case 2:
                        case 3:
                            taskType.val(4);
                            break;
                        case 4:
                            taskType.val(5);
                            break;
                    }
                })
            });
        </script>
    </body>
</html>
